<template>
    <div class="wrapper" ontouchmove="event.stopPropagation()">
        <div class="swiper-container container" v-show="showSwiper">
            <div class="swiper-wrapper" v-show="showSwiper">
                <div class="swiper-slide">
                    <img id="imgBox" src="#" alt="">
                    <canvas class="myCanvas" id="myCanvas"></canvas>
                </div>
                <div class="result swiper-slide">
                    <div class="rotate">
                        <div class="success">领取成功</div>
                        <div class="coupons" @click="getCoupons()">领取优惠券</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="result" v-show="showResult">
            <div class="rotate">
                <div class="success">领取成功</div>
                <div class="coupons" @click="getCoupons()">领取优惠券</div>
            </div>

            <div class="go-home" @click="goVip()" v-if="vip == false">
                <!--<img :src="resources.img.prize.join"/>-->
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        props: ['resources', 'pageType'],
        data() {
            return {
                resultImg: '',
                text1: '我的脸不开挂!',
                text2: '泡妞和工作要的是硬实力',
                img: '',
                showClue: true,
                showSave: false,
                showSwiper: true,
                showResult: false,
                userMsg: '',
                vip: false,
                cue: '',
                msg: '',
                noPrize: true,
                prize: [],
            }
        },
        mounted() {
            this.initSwiper();
            this.drawImage();

            let self = this;
            this.$nextTick(function () {
                $.ajax({
                    type: 'GET',
                    url: '?c=mark_ctrl&m=get_mark_list_day',
                    dataType: 'json',
                    data: {},
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.userMsg = response.data;
                        }
                    }
                });
            })
        },
        methods: {
            initSwiper() {
                let self = this;
                let mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical',
                    speed: 500,
                    autoHeight: true,
                    onSlideChangeStart: function () {
//                    $('.swiper-container').height('auto');
//                    $('.swiper-wrapper').height('auto');
                        setTimeout(() => {
                            self.hideSwiper();
                        }, 500);
                    }
                });
            },
            getCoupons() {
                $(".rotate").css("-webkit-transform", "rotateY(180deg)");

                $.ajax({
                    type: 'POST',
                    url: '?c=prize_ctrl&m=get_prize',
                    dataType: 'json',
                    data: {
                        mark: mark
                    },
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            if (response.data) {
                                $.ajax({
                                    type: 'POST',
                                    url: '?c=vip_ctrl&m=vip',
                                    dataType: 'json',
                                    data: {},
                                    error: function (error) {
                                        //alert(JSON.stringify(error));
                                    },
                                    success: function (response) {
                                        if (response.err) {
                                            //alert(response.err.msg);
                                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                                            //fn.tx(response);
                                        } else {
                                            //console.log(JSON.parse(response.data).data,JSON.parse(response.data).data.custId,!JSON.parse(response.data).data.custId);
                                            if (!JSON.parse(response.data).data.custId) {
                                                self.vip = false;
                                                self.cue = '*您还不是会员，需要开通会员即可领取';
                                                //console.log('非会员');
                                            } else {
                                                if (CFG.noDev) _czc.push(["_trackEvent", 'getPrize', 'getPrize', '', '', '']);
                                                self.vip = true;
                                                self.cue = '*奖品已发放至您的卡券包';
                                                //console.log('会员');
                                            }
                                        }
                                    }
                                });
                            } else {
                                self.msg = response.data.allmsg;
                                self.noPrize = true;
                                self.prize = [];
                            }
                        }
                    }
                });
            },
            hideSwiper() {
                this.showSwiper = false;
                this.showResult = true;
            },
            drawImage() {
                this.showClue = false;
                console.log(this.text1, this.text2, this.showClue);
                let myCanvas = document.getElementById('myCanvas');
                let clientWidth = this.getWidth();
                myCanvas.width = clientWidth;
                myCanvas.height = clientWidth * 667 / 375;
                let context = myCanvas.getContext('2d');
                let img = new Image();
                img.src = 'front/img/index/background.jpg';
                let w = clientWidth;
                let self = this;
                img.onload = function () {
                    context.drawImage(img, 0, 0, w, w * 667 / 375);
                    context.font = "40px '微软雅黑'";
                    context.fillText(self.text1, 10, 50);
                    context.fillText(self.text2, 10, 100);
                    let toImg = myCanvas.toDataURL("image/jpeg");
                    let img2 = new Image();
                    img2.src = toImg;
                    img2.onload = function () {
                        $('#imgBox').attr('src', toImg);
                    };
                };
            },
            getWidth() {
                if (window.innerWidth) {
                    return window.innerWidth;
                } else {
                    if (document.compatMode == 'CSS1Compat') {
                        return document.documentElement.clientWidth;
                    } else {
                        return document.body.clientWidth;
                    }
                }
            },
            goVip(){
                if(CFG.noDev) _czc.push(["_trackEvent",'openVIP','openVIP','','','']);
                //window.location.href = "https://mp.weixin.qq.com/bizmall/activatemembercard?action=preshow&&encrypt_card_id=Pt3L7sMVuBei5qM7VPaUZ6wiwcxcBoLU0DngceDdO%2B8FcNYt7UDaHAA2LGsCeu6U&outer_str=hotwind&biz=MzI5MzQxMTM2Mw%3D%3D#wechat_redirect";
                window.location.href = "https://mp.weixin.qq.com/bizmall/activatemembercard?action=preshow&&encrypt_card_id=%2BzsGTRKYt8ksZYSJn9X0U8Mq1opgRQR5cIvdThMblkOFVm%2B%2BbpwfncfJn%2FfMr77J&outer_str=hotwind&biz=MjM5MjEzNDAyMA%3D%3D#wechat_redirect";
            }

        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        height: 100%;
        width: 100%;
        .container {
            height: 100%;
            width: 100%;
            .myCanvas {
                display: none;
            }
        }
        .result {
            width: 100%;
            height: 50rem;
            background-image: url(../../img/index/background.jpg);
            background-size: 100%;
            background-repeat: no-repeat;
            .rotate {
                width: 250px;
                height: 2rem;
                background: rgba(0, 0, 0, 0.5);
                color: #fff;
                font-size: 40px;
                position: absolute;
                top: 0;
                left: 0;
                transition: 1s;
                -moz-transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
                .coupons {
                    z-index: 2;
                    backface-visibility: hidden;
                    -webkit-backface-visibility: hidden;
                    -moz-backface-visibility: hidden;
                    -ms-backface-visibility: hidden;
                }
                .success {
                    z-index: 2;
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg);
                    backface-visibility: hidden;
                    -webkit-backface-visibility: hidden;
                    -moz-backface-visibility: hidden;
                    -ms-backface-visibility: hidden;
                }
            }

        }
    }
</style>
